<template>
    <div class="container">
        <div class="height70"></div>
        <div class="container-title">公司业务</div>
        <div class="height70"></div>
        <div class="son-title m-t-25">{{title}}</div>
            <div class="son-text">
                {{desc}}
            </div>
            <div class="son-xuanxiang">
                <div>
                    <div class="select">
                        <div v-for="(item , index) in selectList" :key="index"  :class="'select-item ' + (index==num?'on':'no')" @click="selectClick(index)" >
                            <div class="itemImg-wapper"><img :src="item.smallImgUrl" alt=""></div>
                            <div class="item-name">{{item.name}}</div>
                        </div>
                    </div>
                     <div class="place-btn" @click="popUpClick">极速下单</div>
                </div>
                <div class="select-ren">
                    <img :src="bigImgUrl" alt="">
                </div>
            </div>
            <div class="height70"></div>

            <transition leave-active-class="animated bounceOutDown"   enter-active-class="animated bounce">
                <div class="pop-up" v-show="popUp">
                    <img class="pock" src="../../../assets/pock.png" alt="">
                    <div class="title">找服务</div>
                    <div class="pock-wrapper">
                        <div class="pock-input">
                            <span>姓名</span>
                            <input type="text">
                        </div>
                        <div class="pock-input">
                            <span>联系电话</span>
                            <input type="text">
                        </div>
                        <div class="pock-input">
                            <span>服务城市</span>
                            <input type="text">
                        </div>
                        <div class="pock-input">
                            <span>我在寻找</span>
                            <div class="pock-xuanze">
                                <div class="xuanze-item"  v-for="(item , index) in selectList" :key="item.name" @click="xuanzeClick(index)" >
                                    <span class="xuanze-iocn" :class="index==pock?'ons':''"></span><span>{{item.name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="pock-submit" @click="submitClick">提交</div>
                    </div>
                </div>
            </transition>
            
    </div>
     
</template>

<script>
export default {
    name: 'Select',
    data () {
        return {
            num: 0,
            pock: 0,
            title: '',
            desc: '',
            bigImgUrl: '',
            popUp: false,
            selectList: [
                {   
                    name: '月嫂',
                    desc: '月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂' ,
                    smallImgUrl: '../../static/indeximg/yuesao2.png',
                    bigImgUrl: '../../static/indeximg/yuesao1.png',
                }, {   
                    name: '保姆',
                    desc: '保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆' ,
                    smallImgUrl: '../../static/indeximg/baomu2.png',
                    bigImgUrl: '../../static/indeximg/baomu1.png',
                }, {   
                    name: '育儿嫂',
                    desc: '育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂' ,
                     smallImgUrl: '../../static/indeximg/yuer2.png',
                    bigImgUrl: '../../static/indeximg/yuer1.png',
         
                }, {   
                    name: '油烟机清洗',
                    desc: '油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗' ,
                    smallImgUrl: '../../static/indeximg/youyan2.png',
                    bigImgUrl: '../../static/indeximg/youyan1.png',
                 
                }, {   
                    name: '住家陪护',
                    desc: '住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护' ,
                    smallImgUrl: '../../static/indeximg/zhujia2.png',
                    bigImgUrl: '../../static/indeximg/zhujia1.png',
                   
                }, {   
                    name: '医院陪护',
                    desc: '医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护' ,
                    smallImgUrl: '../../static/indeximg/peihu2.png',
                    bigImgUrl: '../../static/indeximg/peihu1.png',
                   
                }, {   
                    name: '保洁',
                    desc: '保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁' ,
                    smallImgUrl: '../../static/indeximg/baojie2.png',
                    bigImgUrl: '../../static/indeximg/baojie1.png',
                   
                }, {   
                    name: '钟点工',
                    desc: '钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工' ,
                    smallImgUrl: '../../static/indeximg/zhongdian2.png',
                    bigImgUrl: '../../static/indeximg/zhongdian1.png',
                }
            ]
        }
    },
    watch: {
        num (e) {
           this.title = this.selectList[e].name
           this.desc = this.selectList[e].desc
           this.bigImgUrl= this.selectList[e].bigImgUrl
        }
    },
    methods: {
        selectClick (index) {
            this.num = index
        },
        popUpClick () {
            this.popUp = true
        },
        xuanzeClick (index) {
            this.pock = index
        }, 
        submitClick () {
            this.popUp = false
        }
    },
    mounted() {
        this.title = this.selectList[0].name
        this.desc = this.selectList[0].desc
        this.bigImgUrl= this.selectList[0].bigImgUrl
    },
   
}
</script>

<style lang="stylus" scoped>

    .on
        background-color #ffb852
        border solid 1px #ffb852
    .no
        background-color #5287ff
        border solid 1px #5287ff    
    .son-xuanxiang
        display :flex
        align-items center
        justify-content space-between
       .select
            width 615px
            display flex
            flex-wrap wrap
            justify-content space-between
            .select-item
                margin 35px 0
                width 134px
                height 155px
                border-radius 10px
                overflow hidden
                cursor pointer
                .itemImg-wapper
                    height 120px
                    background-color #eee
                    img 
                        width 100%
                        height 100%
                        object-fit cover
                .item-name
                    text-align center
                    line-height 35px
                    height 35px
                    font-size 20px
                    letter-spacing 6px
	                color #ffffff
        .place-btn
            width 610px
            height 58px
            background-color #5287ff
            box-shadow 0px 3px 4px 0px rgba(82, 135, 255, 0.41)
            border-radius 10px
            border solid 2px #ffffff    
            text-align center
            line-height 58px
            color #fff
            letter-spacing 9px
            font-size 30px
            cursor pointer
        .select-ren
            width 523px
            height 504px      
            img
                width 100%
                height 100%
                object-fit cover
    .pop-up
        position fixed
        width 395px
        height 409px
        background-color #ffffff
        box-shadow 0px 1px 8px 0px rgba(0, 0, 0, 0.41)
        border-radius 10px         
        top 0
        bottom 0
        left 0
        right 0
        margin auto
        z-index 101
        .pock
            position absolute
            width 129px
            height 110px
            top -90px
            right -6px
        .title
            color #fff
            line-height 45px
            background-color #6ba0f6
            text-align center
            font-size 18px
            letter-spacing 3px
            border-radius 10px 10px 0 0
        .pock-wrapper
            margin 0 50px
            margin-top 30px
            .pock-input
                display flex
                margin-bottom 20px
                align-items flex-start
                span    
                    width 75px
                    font-size 15px
                input
                    font-size 15px
                    flex 1
                    border 1px solid #bbb
                .pock-xuanze
                    flex 1
                    display flex
                    flex-wrap wrap
                    .xuanze-item
                        width 110px
                        margin-bottom 23px
                        display flex
                        align-items center
                        cursor pointer
                        .xuanze-iocn
                            width 10px
                            height 10px
                            border-radius 50%
                            border 1px solid #5287ff
                            margin-right 10px;
                        .ons
                            position relative
                            &:after
                                content ''
                                background-color #ffb852
                                position absolute
                                width 4px
                                height 4px
                                top 0
                                left 0
                                right 0
                                bottom 0
                                margin auto
            .pock-submit
                width 186px
                height 32px
                background-color #6ba0f7
                border-radius 11px       
                color #fff
                line-height 32px
                font-size 15px
                margin auto
                text-align center
                margin-top -22px
                cursor pointer            
</style>

